<template>
  <div>
    <div class="oneone">
      <div class="twotwo">
        <!--楼栋数据-->
        <template>
          <el-table
              :data="buildingList"
              style="width: 100%"
              @row-click="getBuildingId"
              highlight-current-row
          >
            <el-table-column
                prop="buildingname"
                label="楼栋"
                width="150">
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEditBuilding(scope.row.id)">修改
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteBuilding(scope.row.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="threethree">
        <span>(共{{ buildingNum }}栋)</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button
            size="mini"
            type="primary"
            @click="openAddBuildingForm">添加楼栋
        </el-button>
        <el-button
            size="mini"
            type="primary"
            @click="openPiliangForm">批量生成床位
        </el-button>

      </div>
    </div>
    <!--添加楼栋-->
    <el-dialog title="添加楼栋" :visible.sync="addBuildingFormVisible" @close="closeAddBuildingForm"
               :close-on-click-modal="false">
      <el-form ref="addBuildingForm" :rules="addBuildingFormRules" :model="addBuildingForm" label-width="150px"
               size="big">
        <el-form-item label="楼栋名称" prop="buildingname">
          <el-input v-model="addBuildingForm.buildingname" placeholder="请输入楼栋名称" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddBuildingForm">取 消</el-button>
        <el-button type="primary" @click="AddBuildingFormOK">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑楼栋-->
    <el-dialog title="编辑楼栋" :visible.sync="modifyBuildingFormVisible" @close="closeModifyBuildingForm"
               :close-on-click-modal="false">
      <el-form ref="modifyBuildingForm" :rules="modifyBuildingFormRules" :model="modifyBuildingForm" label-width="150px"
               size="big">
        <el-form-item label="楼栋名称" prop="buildingname">
          <el-input v-model="modifyBuildingForm.buildingname" placeholder="请输入楼栋名称" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModifyBuildingForm">取 消</el-button>
        <el-button type="primary" @click="modifyBuildingFormOK">确 定</el-button>
      </div>
    </el-dialog>
    <div class="oneone">
      <div class="twotwo">
        <!--楼层数据-->
        <template>
          <el-table
              :data="storeyList"
              style="width: 100%"
              @row-click="getStoreyId"
              highlight-current-row
          >
            <el-table-column
                prop="storeyname"
                label="楼层"
                width="150">
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEditStorey(scope.row.id)">修改
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteStorey(scope.row.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="threethree">
        <span>{{ buildingName }}</span>
        <span>(共{{ storeyNum }}层)</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button
            size="mini"
            type="primary"
            @click="openAddStoreyForm">添加楼层
        </el-button>
      </div>
    </div>
    <!--添加楼层-->
    <el-dialog title="添加楼层" :visible.sync="addStoreyFormVisible" @close="closeAddStoreyForm"
               :close-on-click-modal="false">
      <el-form ref="addStoreyForm" :rules="addStoreyFormRules" :model="addStoreyForm" label-width="150px"
               size="big">
        <el-form-item label="楼层名称" prop="storeyname">
          <el-input v-model="addStoreyForm.storeyname" placeholder="请输入楼层名称" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddStoreyForm">取 消</el-button>
        <el-button type="primary" @click="AddStoreyFormOK">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑楼层-->
    <el-dialog title="编辑楼层" :visible.sync="modifyStoreyFormVisible" @close="closeModifyStoreyForm"
               :close-on-click-modal="false">
      <el-form ref="modifyStoreyForm" :rules="modifyStoreyFormRules" :model="modifyStoreyForm" label-width="150px"
               size="big">
        <el-form-item label="楼层名称" prop="storeyname">
          <el-input v-model="modifyStoreyForm.storeyname" placeholder="请输入楼层名称" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModifyStoreyForm">取 消</el-button>
        <el-button type="primary" @click="modifyStoreyFormOK">确 定</el-button>
      </div>
    </el-dialog>
    <div class="oneone">
      <div class="twotwo">
        <!--房间数据-->
        <template>
          <el-table
              :data="roomList"
              style="width: 100%"
              @row-click="getRoomId"
              highlight-current-row
          >
            <el-table-column
                prop="roomname"
                label="房间"
                width="70">
            </el-table-column>
            <el-table-column
                prop="housetype"
                label="房间类型"
                width="80">
            </el-table-column>

            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEditRoom(scope.row.id)">修改
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteRoom(scope.row.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="threethree">
        <span>{{ buildingName }}{{ storeyName }}</span>
        <span>(共{{ roomNum }}间)</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button
            size="mini"
            type="primary"
            @click="openAddRoomForm">添加房间
        </el-button>
      </div>
    </div>
    <!--添加房间-->
    <el-dialog title="添加房间" :visible.sync="addRoomFormVisible" @close="closeAddRoomForm"
               :close-on-click-modal="false">
      <el-form ref="addRoomForm" :rules="addRoomFormRules" :model="addRoomForm" label-width="150px"
               size="big">
        <el-form-item label="房间名称" prop="roomname">
          <el-input v-model="addRoomForm.roomname" placeholder="请输入房间名称" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="房间类型" prop="housetypeId">
          <el-select v-model="addRoomForm.housetypeId" placeholder="请选择房间类型" style="width: 220px">
            <el-option :label="t.housetype" v-for="t in typeList" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddRoomForm">取 消</el-button>
        <el-button type="primary" @click="AddRoomFormOK">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑房间-->
    <el-dialog title="编辑房间" :visible.sync="modifyRoomFormVisible" @close="closeModifyRoomForm"
               :close-on-click-modal="false">
      <el-form ref="modifyRoomForm" :rules="modifyRoomFormRules" :model="modifyRoomForm" label-width="150px"
               size="big">
        <el-form-item label="房间名称" prop="roomname">
          <el-input v-model="modifyRoomForm.roomname" placeholder="请输入房间名称" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="房间类型" prop="housetypeId">
          <el-select v-model="modifyRoomForm.housetypeId" placeholder="请选择房间类型" style="width: 220px">
            <el-option :label="t.housetype" v-for="t in typeList" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModifyRoomForm">取 消</el-button>
        <el-button type="primary" @click="modifyRoomFormOK">确 定</el-button>
      </div>
    </el-dialog>
    <div class="oneone">
      <div class="twotwo">
        <!--床位数据-->
        <template>
          <el-table
              :data="bedList"
              style="width: 100%"
              highlight-current-row
          >
            <el-table-column
                prop="bedname"
                label="床位"
                width="80">
            </el-table-column>
            <el-table-column
                prop="state"
                label="床位状态"
                width="70">
              <template slot-scope="bed">
                <span style="color: green" v-if="bed.row.state==0">空闲</span>
                <span style="color: red" v-if="bed.row.state==1">入住</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEditBed(scope.row.id)">修改
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteBed(scope.row.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="threethree">
        <span>{{ buildingName }}{{ storeyName }}{{ roomName }}</span>
        <span>(共{{ bedNum }}床)</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button
            size="mini"
            type="primary"
            @click="openAddBedForm">添加床位
        </el-button>
      </div>
    </div>
    <!--添加床位-->
    <el-dialog title="添加床位" :visible.sync="addBedFormVisible" @close="closeAddBedForm"
               :close-on-click-modal="false">
      <el-form ref="addBedForm" :rules="addBedFormRules" :model="addBedForm" label-width="150px"
               size="big">
        <el-form-item label="床位名称前缀" prop="bedPrefix">
          <el-input v-model="addBedForm.bedPrefix" disabled style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="床位名称" prop="bedname">
          <el-input v-model="addBedForm.bedname" placeholder="请输入床位名称" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddBedForm">取 消</el-button>
        <el-button type="primary" @click="AddBedFormOK">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑床位-->
    <el-dialog title="编辑床位" :visible.sync="modifyBedFormVisible" @close="closeModifyBedForm"
               :close-on-click-modal="false">
      <el-form ref="modifyBedForm" :rules="modifyBedFormRules" :model="modifyBedForm" label-width="150px"
               size="big">
        <el-form-item label="床位名称前缀:" prop="bedPrefix">
          <el-input disabled v-model="str" placeholder="请输入床位名称" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="床位名称" prop="bedname">
          <el-input v-model="modifyBedForm.bedname" placeholder="请输入床位名称" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeModifyBedForm">取 消</el-button>
        <el-button type="primary" @click="modifyBedFormOK">确 定</el-button>
      </div>
    </el-dialog>
    <!--    批量增加床位-->
    <el-dialog title="添加床位" :visible.sync="piliangFormVisible" @close="closePiliangForm"
               :close-on-click-modal="false">
      <el-form ref="piliangForm" :rules="piliangFormRules" :model="piliangForm" label-width="150px"
               size="big">
        <el-form-item label="楼栋名称" prop="buildingName">
          <el-input v-model="piliangForm.buildingName" placeholder="请输入楼栋名称" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="楼层数" prop="storeyNum">
          <el-input v-model="piliangForm.storeyNum" placeholder="一共多少层" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="楼层名前缀" prop="storeyNamePrefix">
          <el-input v-model="piliangForm.storeyNamePrefix" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item disabled>
          <span style="font-size: 1px">如果楼层名前缀为“A”，则批量生成的楼层名为“A01，A02，A03，以此递增”</span>
        </el-form-item>
        <el-form-item label="每层房间数" prop="roomNum">
          <el-input v-model="piliangForm.roomNum" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="房间类型" prop="housetypeId">
          <el-select v-model="piliangForm.housetypeId" placeholder="请选择房间类型" style="width: 400px">
            <el-option :label="t.housetype" v-for="t in typeList" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间名前缀" prop="roomNamePrefix">
          <el-input v-model="piliangForm.roomNamePrefix" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item disabled>
          <span style="font-size: 1px">如果房间名前缀为“医务室”，则批量生成的房间名为“医务室01，医务室02，医务室03，以此递增”</span>
        </el-form-item>
        <el-form-item label="每间床位数" prop="bedNum">
          <el-input v-model="piliangForm.bedNum" style="width: 400px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closePiliangForm">取 消</el-button>
        <el-button type="primary" @click="PiliangFormOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {toRefs} from "vue";

export default {
  data() {
    return {
      str: '',
      piliangForm: {
        buildingName: '',
        storeyNum: '',
        storeyNamePrefix: '',
        roomNum: '',
        housetypeId: '',
        roomNamePrefix: '',
        bedNum: '',
      },
      buildingNum: 0,
      storeyNum: 0,
      roomNum: 0,
      bedNum: 0,
      buildingList: [],
      buildingId: 0,
      buildingName: '',
      storeyId: 0,
      storeyName: '',
      roomId: 0,
      roomName: '',
      bedId: 0,
      storeyList: [],
      roomList: [],
      bedList: [],
      typeList: [],
      piliangFormVisible: false,
      addBuildingFormVisible: false,
      addStoreyFormVisible: false,
      addRoomFormVisible: false,
      addBedFormVisible: false,
      modifyBuildingFormVisible: false,
      modifyStoreyFormVisible: false,
      modifyRoomFormVisible: false,
      modifyBedFormVisible: false,
      piliangFormRules: {
        buildingName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        storeyNum: [
          {required: true, message: '不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        roomNum: [
          {required: true, message: '不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        housetypeId: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        bedNum: [
          {required: true, message: '不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
      },
      addBuildingForm: {
        buildingname: '',
      },
      modifyBuildingForm: {
        buildingname: '',
      },
      addBuildingFormRules: {
        buildingname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
      modifyBuildingFormRules: {
        buildingname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
      addStoreyForm: {},
      modifyStoreyForm: {
        storeyname: '',
      },
      addStoreyFormRules: {
        storeyname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
      modifyStoreyFormRules: {
        storeyname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
      addRoomForm: {},
      modifyRoomForm: {
        storeyname: '',
        housetypeId: '',
      },
      addRoomFormRules: {
        roomname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        housetypeId: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      },
      modifyRoomFormRules: {
        roomname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        housetypeId: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      },
      addBedForm: {},
      modifyBedForm: {},
      addBedFormRules: {
        bedname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
      modifyBedFormRules: {
        bedname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
    };
  },
  methods: {
    openPiliangForm() {
      this.piliangFormVisible = true;
      this.initHouseType();
    },
    closePiliangForm() {
      this.piliangFormVisible = false;
    },
    PiliangFormOK() {
      this.$refs.piliangForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要添加吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/piliang/add'
            this.$axios.post(url, this.piliangForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initBuilding();
                this.piliangFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })

    },
    //确认添加
    AddBuildingFormOK() {
      this.$refs.addBuildingForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要添加吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/building/add'
            this.$axios.post(url, this.addBuildingForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initBuilding();
                this.addBuildingFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },
    //确认修改
    modifyBuildingFormOK() {
      this.$refs.modifyBuildingForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          let url = '/building/modify'
          this.$axios.put(url, this.modifyBuildingForm).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.initBuilding();
              this.modifyBuildingFormVisible = false;
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error',
                duration: 1000
              });
            }
          })
        }
      })
    },
    openAddBuildingForm() {
      this.addBuildingFormVisible = true;
      this.addBuildingForm = {};
    },
    closeAddBuildingForm() {
      this.addBuildingFormVisible = false;
    },
    closeModifyBuildingForm() {
      this.modifyBuildingFormVisible = false;
    },
    //确认添加
    AddStoreyFormOK() {
      this.$refs.addStoreyForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要添加吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/storey/add'
            this.$axios.post(url, this.addStoreyForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initStorey();
                this.addStoreyFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },

    //确认修改
    modifyStoreyFormOK() {
      this.$refs.modifyStoreyForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          let url = '/storey/modify'
          this.$axios.put(url, this.modifyStoreyForm).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.initStorey();
              this.modifyStoreyFormVisible = false;
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error',
                duration: 1000
              });
            }
          })
        }
      })
    },
    openAddStoreyForm() {
      if (this.buildingId == 0) {
        this.$message({
          message: '请选择楼栋',
          type: 'error',
          duration: 1000
        });
      } else {
        this.addStoreyFormVisible = true;
        this.addStoreyForm = {
          storeyname: '',
          buildingId: this.buildingId,
        }
      }
    },
    closeAddStoreyForm() {
      this.addStoreyFormVisible = false;
    },
    closeModifyStoreyForm() {
      this.modifyStoreyFormVisible = false;
    },
    //确认添加
    AddRoomFormOK() {
      this.$refs.addRoomForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要添加吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/room/add'
            this.$axios.post(url, this.addRoomForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initRoom();
                this.addRoomFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },
    //确认修改
    modifyRoomFormOK() {
      this.$refs.modifyRoomForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          let url = '/room/modify'
          this.$axios.put(url, this.modifyRoomForm).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.initRoom();
              this.modifyRoomFormVisible = false;
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error',
                duration: 1000
              });
            }
          })
        }
      })
    },
    openAddRoomForm() {
      this.initHouseType();
      if (this.storeyId == 0) {
        this.$message({
          message: '请选择楼层',
          type: 'error',
          duration: 1000
        });
      } else {
        this.addRoomFormVisible = true;
        this.addRoomForm = {
          roomname: '',
          housetypeId: '',
          storeyId: this.storeyId,
          buildingId: this.buildingId,
        }
      }
    },
    closeAddRoomForm() {
      this.addRoomFormVisible = false;
    },
    closeModifyRoomForm() {
      this.modifyRoomFormVisible = false;
    },
    //确认添加
    AddBedFormOK() {
      this.$refs.addBedForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要添加吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/bed/add'
            this.$axios.post(url, this.addBedForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initBed();
                this.addBedFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },
    //确认修改
    modifyBedFormOK() {
      this.$refs.modifyBedForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.modifyBedForm.bedname = this.str + '-' + this.modifyBedForm.bedname
          let url = '/bed/modify'
          this.$axios.put(url, this.modifyBedForm).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.initBed();
              this.modifyBedFormVisible = false;
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error',
                duration: 1000
              });
            }
          })
        }
      })
    },
    openAddBedForm() {
      if (this.roomId == 0) {
        this.$message({
          message: '请选择房间',
          type: 'error',
          duration: 1000
        });
      } else {
        this.addBedFormVisible = true;
        this.addBedForm = {
          bedname: '',
          bedPrefix: this.buildingName + '-' + this.storeyName + '-' + this.roomName,
          roomId: this.roomId,
          storeyId: this.storeyId,
          buidingId: this.buildingId,
        }
        console.log(this.addBedForm)
      }
    },
    closeAddBedForm() {
      this.addBedFormVisible = false;
    },
    closeModifyBedForm() {
      this.modifyBedFormVisible = false;
    },


// 行鼠标点击事件
    getBuildingId(row) {
      this.buildingId = row.id;
      this.storeyId = 0;
      this.storeyName = '';
      this.roomId = 0;
      this.roomName = '';
      this.buildingName = row.buildingname;
      this.initStorey()
      this.initRoom()
      this.initBed();
    },
    getStoreyId(row) {
      this.storeyId = row.id;
      this.roomId = 0;
      this.roomName = '';
      this.storeyName = row.storeyname;
      this.initRoom();
      this.initBed()
    },
    getRoomId(row) {
      this.roomId = row.id;
      this.roomName = row.roomname;
      this.initBed();
    },
    //初始化全部
    initHouseType() {
      let url0 = "./housetype/all";
      this.$axios.get(url0).then((res) => {
        if (res.data.code == 200) {
          this.typeList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initBuilding() {
      let url1 = "/building/list"
      this.$axios.get(url1).then((res) => {
        if (res.data.code == 200) {
          this.buildingList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url2 = "/building/num"
      this.$axios.get(url2).then((res) => {
        if (res.data.code == 200) {
          this.buildingNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initStorey() {
      let url3 = "/storey/list/" + this.buildingId
      this.$axios.get(url3).then((res) => {
        if (res.data.code == 200) {
          this.storeyList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url4 = "/storey/num/" + this.buildingId
      this.$axios.get(url4).then((res) => {
        if (res.data.code == 200) {
          this.storeyNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initRoom() {
      let url5 = "/room/list/" + this.storeyId
      this.$axios.get(url5).then((res) => {
        if (res.data.code == 200) {
          this.roomList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url6 = "/room/num/" + this.storeyId
      this.$axios.get(url6).then((res) => {
        if (res.data.code == 200) {
          this.roomNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initBed() {
      let url7 = "/bed/list/" + this.roomId
      this.$axios.get(url7).then((res) => {
        if (res.data.code == 200) {
          this.bedList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url8 = "/bed/num/" + this.roomId
      this.$axios.get(url8).then((res) => {
        if (res.data.code == 200) {
          this.bedNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    handleDeleteBuilding(id) {
      this.$confirm("你确定要删除此记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/building/delete/' + id;
        this.$axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initBuilding();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    //修改申请表
    handleEditBuilding(id) {
      this.modifyBuildingFormVisible = true;
      let url = "/building/one/" + id;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.modifyBuildingForm = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    handleDeleteStorey(id) {
      this.$confirm("你确定要删除此记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/storey/delete/' + id;
        this.$axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initStorey();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    //修改申请表
    handleEditStorey(id) {
      this.modifyStoreyFormVisible = true;
      let url = "/storey/one/" + id;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.modifyStoreyForm = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    handleDeleteRoom(id) {
      this.$confirm("你确定要删除此记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/room/delete/' + id;
        this.$axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initRoom();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    //修改申请表
    handleEditRoom(id) {
      this.initHouseType();
      this.modifyRoomFormVisible = true;
      let url = "/room/one/" + id;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.modifyRoomForm = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    handleDeleteBed(id) {
      this.$confirm("你确定要删除此记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/bed/delete/' + id;
        this.$axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initBed();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    //修改申请表
    handleEditBed(id) {
      this.str = this.buildingName + '-' + this.storeyName + '-' + this.roomName
      this.modifyBedFormVisible = true;
      let url = "/bed/one/" + id;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.modifyBedForm = res.data.data;
          let modify = this.modifyBedForm.bedname;
          modify = modify.substring(modify.lastIndexOf("-"))
          modify = modify.substring(1)
          this.modifyBedForm.bedname = modify
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
  },
  created() {
    this.initBuilding();
  }
}
</script>

<style >

.oneone {
  width: 300px;
  height: 800px;
  background-color: #ffffff;
  float: left;
  margin-left: 20px;
}

.twotwo {
  width: 100%;
  height: 740px;
}

.threethree {
  width: 100%;
  height: 60px;
  line-height: 40px;
  border-top: 1px #dbdada solid;
}
</style>